import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';

import './util/global';

import MineScreen from './src/MineScreen';
import HomeScreen from './src/HomeScreen';
import LoginScreen from './src/LoginScreen';
import LearnScreen from './src/view/learn/LearnScreen';
import ScoreScreen from './src/ScoreScreen';
import UsersScreen from './src/UsersScreen';
import ActiveDetailScreen from './src/view/active/ActiveDetailScreen';
import HonorApplyScreen from './src/view/honor/HonorApplyScreen';
import NoticeDetailScreen from './src/NoticeDetailScreen';
import NoticeScreen from './src/NoticeScreen';
import LessonScreen from './src/view/lesson/LessonScreen';
import LessonEditScreen from './src/view/lesson/LessonEditScreen';
import LessonDetailScreen from './src/view/lesson/LessonDetailScreen';
import ActiveScreen from './src/view/active/ActiveScreen';
import ActiveEditScreen from './src/view/active/ActiveEditScreen';
import ActiveApplyScreen from './src/view/active/ActiveApplyScreen';
import { PAGENAME } from './util/PageName';
import LearnEditScreen from './src/view/learn/LearnEditScreen';
import LearnDetailScreen from './src/view/learn/LearnDetailScreen';
import NoticeAddScreen from "./src/view/notice/NoticeAddScreen";
import NoticeUpdateScreen from "./src/view/notice/NoticeUpdateScreen";
import BranchApplyScreen from "./src/view/branch/BranchApplyScreen";
import BranchScreen from "./src/view/branch/BranchScreen";
import BranchDetailScreen from "./src/view/branch/BranchDetailScreen";
import BranchUpdateScreen from "./src/view/branch/BranchUpdateScreen";
import HonorDetailScreen from "./src/view/honor/HonorDetailScreen";
import HonorScreen from "./src/view/honor/HonorScreen";
import HonorEditScreen from "./src/view/honor/HonorEditScreen";
import AddUserScreen from './src/view/user/AddUserScreen';
import EditUserScreen from './src/view/user/EditUserScreen';
import CompanyEditScreen from './src/view/company/CompanyEditScreen';
import PunishmentScreen from "./src/view/honor/PunishmentScreen";

const Tab = createBottomTabNavigator();
const IndexStackPage = [
  {
    name: PAGENAME.ACTIVE,
    component: ActiveScreen,
    options: {
      headerShown: true,
      headerTitle: '学习活动',
    },
  },
  {
    name: PAGENAME.ACTIVE_EDIT,
    component: ActiveEditScreen,
    options: {
      headerShown: true,
      headerTitle: '学习活动编辑',
    },
  },
  {
    name: PAGENAME.ACTIVE_DETAIL,
    component: ActiveDetailScreen,
    options: {
      headerShown: true,
      headerTitle: '活动详情',
    },
  },
  {
    name: PAGENAME.ACTIVE_APPLY,
    component: ActiveApplyScreen,
    options: {
      headerShown: true,
      headerTitle: '活动申报',
    },
  },
  // 积分
  {
    name: PAGENAME.SCORE,
    component: ScoreScreen,
    options: {
      headerShown: true,
      headerTitle: '积分公示',
    },
  },
  // 线上课程
  {
    name: PAGENAME.LESSON,
    component: LessonScreen,
    options: {
      headerShown: true,
      headerTitle: '线上课程',
    },
  },
  {
    name: PAGENAME.LESSON_EDIT,
    component: LessonEditScreen,
    options: {
      headerShown: true,
      headerTitle: '课程编辑',
    },
  },
  {
    name: PAGENAME.LESSON_DETAIL,
    component: LessonDetailScreen,
    options: {
      headerShown: true,
      headerTitle: '课程详情',
    },
  },
  // 学习园地
  {
    name: PAGENAME.LEARN,
    component: LearnScreen,
    options: {
      headerShown: true,
      headerTitle: '学习园地',
    },
  },
  {
    name: PAGENAME.LEARN_EDIT,
    component: LearnEditScreen,
    options: {
      headerShown: true,
      headerTitle: '学习编辑',
    },
  },
  {
    name: PAGENAME.LEARN_DETAIL,
    component: LearnDetailScreen,
    options: {
      headerShown: true,
      headerTitle: '学习详情',
    },
  },
  // 荣誉
  {
    name: PAGENAME.HONOR,
    component: HonorScreen,
    options: {
      headerShown: true,
      headerTitle: '荣誉申报',
    },
  },
  {
    name: PAGENAME.HONOR_APPLY,
    component: HonorApplyScreen,
    options: {
      headerShown: true,
      headerTitle: '荣誉申报',
    },
  },
  {
    name: PAGENAME.HONOR_DETAIL,
    component: HonorDetailScreen,
    options: {
      headerShown: true,
      headerTitle: '荣誉申报',
    },
  },
  {
    name: PAGENAME.HONOR_EDIT,
    component: HonorEditScreen,
    options: {
      headerShown: true,
      headerTitle: '荣誉申报',
    },
  },
  // 公告
  // {
  //   name: PAGENAME.NOTICE_DETAIL,
  //   component: NoticeDetailScreen,
  //   options: {
  //     headerShown: true,
  //     headerTitle: '公告详情',
  //   },
  // },
  {
    name: PAGENAME.NOTICE,
    component: NoticeScreen,
    options: {
      headerShown: true,
      headerTitle: '支部公告',
    },
  },
  {
    name: PAGENAME.NOTICE_ADD,
    component: NoticeAddScreen,
    options: {
      headerShown: true,
      headerTitle: '新增公告',
    },
  },
  {
    name: PAGENAME.NOTICE_DETAIL,
    component: NoticeDetailScreen,
    options: {
      headerShown: true,
      headerTitle: '查看公告',
    },
  },
  {
    name: PAGENAME.NOTICE_UPDATE,
    component: NoticeUpdateScreen,
    options: {
      headerShown: true,
      headerTitle: '修改公告',
    },
  },
  // 支部动态
  {
    name: PAGENAME.BRANCH_ADD,
    component: BranchApplyScreen,
    options: {
      headerShown: true,
      headerTitle: '新增支部动态',
    },
  },
  {
    name: PAGENAME.BRANCH,
    component: BranchScreen,
    options: {
      headerShown: true,
      headerTitle: '支部动态',
    },
  },
  {
    name: PAGENAME.BRANCH_DETAIL,
    component: BranchDetailScreen,
    options: {
      headerShown: true,
      headerTitle: '支部动态详情',
    },
  },
  {
    name: PAGENAME.BRANCH_UPDATE,
    component: BranchUpdateScreen,
    options: {
      headerShown: true,
      headerTitle: '支部动态修改',
    },
  },
  // 用户管理
  {
    name: PAGENAME.USER_ADD,
    component: AddUserScreen,
    options: {
      headerShown: true,
      headerTitle: '新增用户信息',
    },
  },
  {
    name: PAGENAME.USER_EDIT,
    component: EditUserScreen,
    options: {
      headerShown: true,
      headerTitle: '修改用户信息',
    },
  },
  {
    name: PAGENAME.COMPANY_EDIT,
    component: CompanyEditScreen,
    options: {
      headerShown: true,
      headerTitle: '修改支部信息',
    },
  },
  {
    name: PAGENAME.HONOR_PUNISHMENT,
    component: PunishmentScreen,
    options: {
      headerShown: true,
      headerTitle: '发起处分',
    },
  },
];

function IndexTabScreen(navigation) {
  const route = navigation.route;
  console.log(route);
  console.log(route.params);

  return (
    <Tab.Navigator
      // screenOptions={{headerShown: false}}
      // tabBarOptions={{
      //   style: { backgroundColor: 'lightblue' },
      // }}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          let iconColor = focused ? 'rgb(250, 207, 93)' : 'rgb(246, 150, 150)';

          if (route.name === '首页') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === '我的') {
            iconName = focused ? 'user' : 'user';
          } else if (route.name === '用户') {
            iconName = focused ? 'sitemap' : 'sitemap';
          }

          // You can return any component that you like here!
          return <Icon name={iconName} size={30} color={iconColor} />;
        },
        tabBarActiveTintColor: 'rgb(250, 207, 93)',
        tabBarInactiveTintColor: 'rgb(246, 150, 150)',
        headerShown: false,
        tabBarStyle: {
          backgroundColor: 'rgb(245, 86, 81)',
        },

        // tabBarBackground: ()=>{color:'red'}
      })}>
      <Tab.Screen name="首页" component={HomeScreen} />
      <Tab.Screen name="我的" component={MineScreen} />
      {route.params.isAdmin && (
        <Tab.Screen
          name="用户"
          component={UsersScreen}
        // options={{headerShown: false}}
        />
      )}
    </Tab.Navigator>
  );
}

const IndexStack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <IndexStack.Navigator
        screenOptions={{
          headerShown: false,
          contentStyle: {
            // backgroundColor: 'red'
          },
        }}>
        <IndexStack.Screen name={PAGENAME.LOGIN} component={LoginScreen} />
        <IndexStack.Screen name={PAGENAME.INDEX} component={IndexTabScreen} />
        <IndexStack.Screen name={PAGENAME.HOME} component={HomeScreen} />
        {IndexStackPage.map((v, index,) => <IndexStack.Screen
          key={'index' + index}
          name={v.name}
          component={v.component}
          options={{
            headerShown: v.options.headerShown,
            headerTitle: v.options.headerTitle,
            headerStyle: {
              backgroundColor: 'rgb(245, 86, 81)',
            },
            headerTintColor: '#fff',
          }}
        />
        )}
      </IndexStack.Navigator>
    </NavigationContainer>
  );
}
